<template>
  <div class="container">
    <div class="top">
      <el-card
          shadow="hover"
          style="width: 33%; margin: 5px; height: 250px;background: linear-gradient(to bottom right, #e24a8d, #c9519b);border-radius: 20px">
        <el-statistic>
          <template #title>
            <p style="font-family:'楷体',serif;font-size: 30px;color: #ffffff">今日人流量统计</p>
          </template>
          <template #suffix>
            <p style="font-family:'楷体',serif;font-size: 40px;color: #ffffff">{{ outputTrafficValue }}</p>
          </template>
        </el-statistic>
      </el-card>
      <el-card
          shadow="hover"
          style="width: 33%; margin: 5px; height: 250px;background: linear-gradient(to bottom right, #835dbf, #5546b5);;border-radius: 20px ">
        <el-statistic>
          <template #title>
            <p style="font-family:'楷体',serif;font-size: 30px;color: #ffffff">入驻店铺统计</p>
          </template>
          <template #suffix>
            <p style="font-family:'楷体',serif;font-size: 40px;color: #ffffff">{{ outputBusinessValue }}</p>
          </template>
        </el-statistic>
      </el-card>
      <el-card
          shadow="hover"
          style="width: 33%; margin: 5px; height: 250px;background: linear-gradient(to bottom right,#58caf2, #6fa0e4);;border-radius: 20px ">
        <el-statistic>
          <template #title>
            <p style="font-family:'楷体',serif;font-size: 30px;color: #ffffff">商城餐品统计</p>
          </template>
          <template #suffix>
            <p style="font-family:'楷体',serif;font-size: 40px;color: #ffffff">{{ outputGoodsValue }}</p>
          </template>
        </el-statistic>
      </el-card>
    </div>
    <div class="bottom">
      <el-card shadow="always" style="width: 65%; margin: 5px; height: 380px;border-radius: 20px">
        <div ref="monthTraffic" style="width: 100%; height: 380px;"></div>
      </el-card>
      <el-card shadow="always" style="width: 35%; margin: 5px; height: 380px;border-radius: 20px">
        <div ref="categoryCount" style="width: 100%; height: 380px;"></div>
      </el-card>
    </div>

  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "ChatHistoryAnalysis",
  data() {
    return {
      monthTraffic: null,
      categoryCount: null,
      dateList: [],
      valueList: [],
      categoryDictCount: [],
      trafficSource: 0,
      outputTrafficValue: 0,
      businessSource: 0,
      outputBusinessValue: 0,
      goodsSource: 0,
      outputGoodsValue: 0,
    };
  },
  methods: {
    //人流量
    trafficEcharts() {
      const chartInstance = echarts.init(this.$refs.monthTraffic);
      const option = {
        title: {
          text: '本月人流量统计',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: this.dateList,
          name: "(月)"
        },
        yAxis: {
          type: 'value',
          name: "(人次)"
        },
        series: [
          {
            data: this.valueList,
            type: 'line',
          }
        ]
      };
      chartInstance.setOption(option);
    },
    async getFootTraffic() {
      try {
        const response = await this.$axios.get('/user/getFootTraffic'); // 使用 this.$axios
        this.dateList = response.data.resultdata.map(it => it.date);
        this.valueList = response.data.resultdata.map(it => it.traffic);

        // 获取今日日期，格式为"11-02"
        const today = new Date();
        const month = String(today.getMonth() + 1).padStart(2, '0');
        const day = String(today.getDate()).padStart(2, '0');
        const todayDate = `${month}-${day}`;

        // 通过日期获取今日人流量
        const todayTraffic = response.data.resultdata.find(it => it.date === todayDate);
        this.trafficSource = todayTraffic ? todayTraffic.traffic : 0;

        this.animateTrafficValue();
        this.trafficEcharts();
      } catch (error) {
        console.error('Error fetching foot traffic data:', error);
      }
    },
    animateTrafficValue() {
      const start = this.outputTrafficValue;
      const change = this.trafficSource - start;
      const duration = 1500; // 动画持续时间
      const increment = 20; // 每次更新的时间间隔
      let currentTime = 0;
      const step = () => {
        currentTime += increment;
        const val = Math.easeInOutQuad(currentTime, start, change, duration);
        this.outputTrafficValue = Math.round(val);
        if (currentTime < duration) {
          setTimeout(step, increment);
        }
      };
      step();
    },

    //餐品种类统计
    categoryEcharts() {
      const chartInstance = echarts.init(this.$refs.categoryCount);
      const option = {
        title: {
          text: '餐品分类统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '餐品数量',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.categoryDictCount
          }
        ]
      };
      chartInstance.setOption(option);
    },
    async getCategoryCount() {
      const response = await this.$axios.get('/category/count'); // 使用 this.$axios
      this.categoryDictCount = response.data.resultdata.map(item => {
        return {
          name: item.label,
          value: item.value
        }
      })
      console.log("list", this.categoryDictCount)
      this.categoryEcharts();
    },

    //统计入驻店铺数量
    async animateBusinessValue() {
      const response = await this.$axios.get('/business/count'); // 使用 this.$axios
      this.businessSource = response.data.resultdata
      const start = this.outputBusinessValue;
      const change = this.businessSource - start;
      const duration = 1500; // 动画持续时间
      const increment = 20; // 每次更新的时间间隔
      let currentTime = 0;
      const step = () => {
        currentTime += increment;
        const val = Math.easeInOutQuad(currentTime, start, change, duration);
        this.outputBusinessValue = Math.round(val);
        if (currentTime < duration) {
          setTimeout(step, increment);
        }
      };
      step();
    },

    //统计餐品数量
    async animateGoodsValue() {
      const response = await this.$axios.get('/goods/count'); // 使用 this.$axios
      this.goodsSource = response.data.resultdata
      const start = this.outputGoodsValue;
      const change = this.goodsSource - start;
      const duration = 1500; // 动画持续时间
      const increment = 20; // 每次更新的时间间隔
      let currentTime = 0;
      const step = () => {
        currentTime += increment;
        const val = Math.easeInOutQuad(currentTime, start, change, duration);
        this.outputGoodsValue = Math.round(val);
        if (currentTime < duration) {
          setTimeout(step, increment);
        }
      };
      step();
    },


  },
  mounted() {
    this.getFootTraffic();
    this.getCategoryCount();
    this.animateBusinessValue();
    this.animateGoodsValue();
  }
};

// 平滑过渡的 easing 函数
Math.easeInOutQuad = function (t, b, c, d) {
  t /= d / 2;
  if (t < 1) return c / 2 * t * t + b;
  t--;
  return -c / 2 * (t * (t - 2) - 1) + b;
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.top {
  width: 100%;
  height: 40%;
  display: flex;
  box-sizing: border-box;
}

.bottom {
  width: 100%;
  height: 60%;
  display: flex;
  box-sizing: border-box;
}
</style>
